﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index3.aspx.cs" Inherits="EarringsRecommendationWeb.index3" %>

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Index3</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/face.css">
    <link href="css/bootstrap-select.css" rel="stylesheet" />
    <style type="text/css">
        .image { 
           position: relative; 
           width: 100%; /* for IE 6 */
        }
        h4.img-magnifier { 
           position: absolute; 
           top: 430px; 
           left: 0; 
           width: 100%; 
        }
        h4 span.normal-earrings { 
           color: white; 
           font: bold 11px/35px Helvetica, Sans-Serif; 
           letter-spacing: -1px;  
           background: rgb(0, 0, 0); /* fallback color */
           background: rgba(0, 0, 0, 0.5);
           padding: 10px;
        }
        h4 span.suggest-earrings { 
           color: black; 
           font: bold 12px/48px Helvetica, Sans-Serif; 
           letter-spacing: -1px;  
           background: rgb(0, 0, 0); /* fallback color */
           background: rgba(2, 204, 116, 0.37);
           padding: 10px;
        }
        h4 span.spacer {
           padding:0 5px;
           background: none;
        }
        .magnifier {
            position: absolute;
            top: 5px;
            left: 130px;
        }
        .suggest-heart {
            position: absolute;
            top: 130px;
            left: 5px;
            color: rgb(255, 0, 101);
        }
    </style>
   
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/fabric.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#form-nav-bar').load('navbar.html');
            $.getScript("js/Login.js", function () { });
        });
    </script>
    <script src="js/toast.js" type="text/javascript"></script>
</head>
<body>
    <div class="alert alert-success" role="alert" style="display:none; z-index: 1000; position: absolute; left:0px; top: 50px;">
      <span>populate alert</span>
    </div>
    <div class="alert alert-warning" role="alert" style="display:none; z-index: 1000; position: absolute; left:0px; top: 50px;">
      <span>populate alert</span>
    </div>
    <!-- Navigation -->
   <nav id="form-nav-bar" class="navbar navbar-inverse navbar-static-top" role="navigation">       
        <!-- /.container -->
    </nav>
    <form runat="server">
        <div class="container">
         <div class="row">
            <div class="col-md-3">
            </div>
             <div class="col-md-6"> 
                <div class="col-md-2">
                    <%--<button type="button" class="glyphicon glyphicon-heart btn btn-danger" 
                        id="btn-addtocart" title="สั่งจอง"></button>--%>
                </div>
                <div class="col-md-8">
                    <p id="face-shape-text">xxx</p>
                    <%--<p >รูปแบบต่างหู ทีเหมาะสมกับคุณ ได้แก่ Stud Cluster Drop</p>--%>                   
                </div>
                <div class="col-md-1 pull-right">
                    <%--<button type="button" class="glyphicon glyphicon-camera btn btn-danger pull-right" 
                        id="btn-capture" title="จับภาพ"></button>--%>
                </div>
            </div>
         </div>
         <div class="row">
            <div class="col-md-3">                
            </div>
             <div class="col-md-6"> 
                <div class="col-md-2">
                    <button type="button" class="glyphicon glyphicon-heart btn btn-danger" 
                        id="btn-addtocart" title="สั่งจอง"></button>
                </div>
                
                <div class="col-md-1 pull-right">
                    <button type="button" class="glyphicon glyphicon-camera btn btn-danger pull-right" 
                        id="btn-capture" title="จับภาพ"></button>
                </div>
            </div>
         </div>
            <br />
        <div class="row">
            <div class="col-md-3">
                <div class="row">
                    <label class="form-control-static"><input id="chk-recommend" type="checkbox" checked />เฉพาะที่แนะนำ</label>
                </div>
                <div class="row">
                   <div style="display: inline-block;">
                         <select id="cbo-style" data-width="90px">                       
                         </select>
                   </div>
                    <div style="display: inline-block;">
                         <select id="cbo-color" data-width="90px">                       
                         </select>
                   </div>
                    <div style="display: inline-block;">
                         <select id="cbo-gem" data-width="90px">                       
                         </select>
                   </div>
               </div>
                <br />
                
                <div class="list-group" style="overflow-y: auto; max-height: 600px; width: 170px; margin-left:50px;">
                    <div id="er-list">
                        <img class="img-thumbnail" src="img/earrings/01.jpg" />
                        <img class="img-thumbnail" src="img/earrings/01.jpg" />
                        <img class="img-thumbnail" src="img/earrings/01.jpg" />
                    </div>
                </div>                
            </div>
            <div class="col-md-6">                
                    <div class="panel panel-default">                     
                      <div class="panel-body" >
                            <canvas id="c" style="width: 425px; height: 480px;" width="425" height="480">
                            </canvas>
                      </div>
                    </div>  
            </div>
            <div class="col-md-3">
                <button type="button" id="btn-compare" class="btn btn-primary" data-loading-text="กำลังบันทึกข้อมูล...">เปรียบเทียบ</button>
                <div class="list-group" id="list-capture" style="overflow-y: auto; max-height: 606px; width: 230px;">
                </div>
            </div>
        </div>
        </div>

        <asp:TextBox ID="earringId" runat="server" CssClass="hidden"></asp:TextBox>
    </form>
    <!-- Page Content -->
    
    <!-- /.container -->
    <div class="container">
        <hr>
        <!-- Footer -->
        <footer>
            
            <div class="row">
                <div class="col-lg-12">
                    <p>
                        Copyright &copy; Your Website 2015
                    </p>
                </div>
            </div>
        </footer>
    </div> 
    <!-- /.container -->
    <!-- Bootstrap Core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootbox.js"></script>
    <script src="js/bootstrap-select.js"></script>
    <script type="text/javascript" src="js/bootbox.js"></script>
    <script type="text/javascript" src="js/index3.js"></script>
</body>
</html>
